<template>
  <div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">个人信息</a></el-breadcrumb-item>
    <el-breadcrumb-item>基本信息</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="userinfo">
    <table class="mailTable" cellspacing="0" cellpadding="0">
      <tr>
        <td class="column">基本资料</td>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td class="column">姓名</td>
        <td>{{ info.name }}</td>
        <td class="column">性别</td>
        <td>{{ info.gender }}</td>
      </tr>
      <tr>
        <td class="column">昵称</td>
        <td>{{ info.nike }}</td>
        <td class="column">出生日期</td>
        <td>{{ info.birthday }}</td>
      </tr>
    </table>
    <table class="mailTable" cellspacing="0" cellpadding="0">
      <tr>
        <td class="column">联系资料</td>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td class="column">手机号码</td>
        <td>{{ info.tel }}</td>
        <td class="column">电话号码</td>
        <td>{{ info.tel }}</td>
      </tr>
      <tr>
        <td class="column">QQ</td>
        <td>{{ info.qq }}</td>
        <td class="column">微信</td>
        <td>{{ info.wx }}</td>
      </tr>
      <tr>
        <td class="column">邮箱</td>
        <td colspan="3">{{ info.email }}</td>
      </tr>
      <tr>
        <td class="column">居住地</td>
        <td colspan="3">{{ info.address }}</td>
      </tr>
      <tr>
        <td class="column">详细地址</td>
        <td colspan="3">{{ info.detailAddress }}</td>
      </tr>
      <tr>
        <td class="column">个人简介</td>
        <td colspan="3">{{ info.intro }}</td>
      </tr>
    </table>

    <!-- Form -->
    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <modal-box :form="form"></modal-box>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChange">确 定</el-button>
      </div>
    </el-dialog>
    <div class="button">
      <el-button class="change" @click="dialogFormVisible = true">修改个人信息</el-button>
    </div>
  </div>
  </div>
</template>
<script>
import ModalBox from "@/components/users/ModalBox";

export default {
  name: 'users',
  components: {
    ModalBox
  },
  data() {
    return {
      info: {
        name: '曾子豪',
        gender: '女',
        nike: '海王',
        birthday: '2000-1-1',
        tel: 11110000,
        qq: 111100000,
        wx: 'nmsl',
        email: '11122333@qq.com',
        address: '东莞',
        detailAddress: '歌舞团',
        intro: '我下过海，当过海王，我无人能敌'
      },
      form:{},
      dialogFormVisible: false,
    }
  },
  methods: {
    // 确定取消弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {
          });
    },
    handleChange() {
      this.dialogFormVisible = false;
      ({...this.info} = {...this.form});
    }
  },
  created() {
    ({...this.form} = {...this.info});
  }
}
</script>

<style>
.userinfo {
  margin: 50px;
  padding: 0 100px;
  /*text-align: center;*/
}

.userinfo .button {
  text-align: center;
}

.userinfo .change {
  margin: 10px auto;
}

.mailTable {
  border-top: 1px solid #E6EAEE;
  border-left: 1px solid #E6EAEE;
  text-align: center;
  margin: 15px;
}

.mailTable tr td {
  width: 250px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  background-color: #EFF3F6;
  color: #393C3E;
}
</style>